<template>
<el-page-header @click="goback">
    <template #content>
      <span class="text-large font-600 mr-3">评分项目重审</span>
    </template>
  </el-page-header>
  <el-descriptions
    class="margin-top"
    style="
      border-radius: 10px;
      margin: 20px auto;
      width: 73%;
      box-shadow: 5px 5px 10px rgba(98, 106, 239, 0.5);
    "
    :column="3"
    size="large"
    border
  >
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          员工姓名
        </div>
      </template>
      {{ empName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          所属部门
        </div>
      </template>
      {{ deptName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          岗位
        </div>
      </template>
      {{ position }}
    </el-descriptions-item>
  </el-descriptions>
  
  <div v-for="(item,index) in tableData">
	  <div style="margin-left:200px;">({{index+1}})被考核人：{{item[0].empName}}</div>
  
  <br>
  
  <el-table
    :data="item"
    border
    style="
      width: 80%;
      margin: 20px auto;
      border-radius: 8px;
      margin: 20px auto;
      box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);
    "
    :header-cell-style="{
      background: '#337ecc ',
      color: '#ffffff',
      border: 'none !important',
    }"
	:span-method="(value) => rowSpanRulesHandler(value, item)"
  >
    <el-table-column prop="empName" label="被考核人" width="120"/>
      <el-table-column prop="type" label="考核条目类型" />
      <el-table-column prop="target" label="考核条目" />
      <el-table-column prop="scorePercent" label="考核条目占比/%" width="140">
		  <template #default="scope">
		    				{{scope.row.scorePercent}}%
		    		</template>
		</el-table-column>
      <el-table-column prop="assessorName" label="评分人" width="120"/>
      <el-table-column prop="assessorPercent" label="评分人占比/%" width="120">
		  <template #default="scope">
		    				{{scope.row.assessorPercent}}%
		    		</template>
		  </el-table-column>
      <el-table-column prop="score" label="评分" width="100"/>
      <el-table-column prop="grade" label="得分">
      </el-table-column>
      
      <el-table-column prop="remark" label="评分说明" width="200"/>
      
    </el-table>
    	<div style="text-align: right;margin-right: 200px;margin-bottom: 20px;"> 总计：{{totalList[index]}}分</div>
  
  </div>
  
  
  <el-button type="primary" @click="submitForm" class="button" >审批通过</el-button>
</template>

<script setup>
import { ref, onBeforeMount, reactive, getCurrentInstance,watch} from "vue";
import {getSecondBack} from "@/api/empScore"
import {backAddScore} from "@/api/resultSecond"
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute();
let deptName = route.query.deptName
let position = route.query.position;

const tableData = ref();
const total = ref(0);
var totalList = [];


onBeforeMount(()=>{
let positionId = route.query.id;
    getSecondBack({positionId})
    .then(data=>{
		//对数据进行处理
		
		var dataList = data.data
		var x = data.data.length
		
		
		var flag = 1
		const tableDataCopy = []
		var data = [];
		
		for(let i = 0 ; i < x ; i++){
			
			
			
			
			data.push(dataList[i])
			
			if(i+1<x && dataList[i].empName != dataList[i+1].empName){
				tableDataCopy.push(data)
				data = []
				flag++;
			}
			
		}
		
		tableDataCopy.push(data)
		
		var total = 0
		
		for(let i=0 ; i < tableDataCopy.length ; i++ ){
			
			for(let y = 0 ; y<tableDataCopy[i].length;y++){
				tableDataCopy[i][y].grade  = (Number(tableDataCopy[i][y].score)* Number(tableDataCopy[i][y].scorePercent)/100 * Number(tableDataCopy[i][y].assessorPercent)/100).toFixed(2) ;
				total += parseFloat(tableDataCopy[i][y].grade)
			}
			totalList[i] = total.toFixed(2)
			total = 0
		}
		
        tableData.value = tableDataCopy
    });
})

const { proxy } = getCurrentInstance();
const goback=()=>{
  proxy.$router.go(-1)
}

const submitForm = () => {
  let assessorId = JSON.parse(localStorage.getItem("userInfo")).id;
  let positionId = route.query.id;
  let positionType=route.query.type
  backAddScore({assessorId, positionId, positionType})
  .then((data) => {
      if (data.code == 200) {
        ElMessage({
          message: "提交成功",
          type: "success",
        });
        goback()
      } else {
        ElMessage.error("提交成功");
      }
    }
  );
};


const compareSingleAttrReturnColSpan = (row, compareAttr, index, tableData) => {
  let count = 0;
    let start = index;
  
   while (start < tableData.length) {
   	
   		
   	if(start > index &&compareAttr==="scorePercent"&&row["target"] !== tableData[start]["target"]){
   		break
   	}else{
   		// 进入循环，检查下一个元素
   		if (start > index && row[compareAttr] !== tableData[start][compareAttr]) {
   			break;  // 如果不相等，则停止合并
   		}
   		count++;  // 计数相同的行
   		start++;  // 移动到下一行
   	}
   	
     
   }
  
    // 将合并的行数存储在行数据中
    if (start > index) {
      tableData[index][`${compareAttr}_count`] = count;
    }
  
    // 检查前一行的合并数量与当前行是否相等
    const previousRowCount = index > 0 ? tableData[index - 1][`${compareAttr}_count`] : 0;
    return previousRowCount === count + 1 ? [0, 0] : [count, 1];
};

const columns = [
  "empName",
  "type",
  "target",
  "scorePercent",
  "assessorName",
  "assessorPercent",
  "score",
  "grade",
  "remark"
];
const rowSpanRulesHandler = ({  row, column, rowIndex, columnIndex }, data) => {
  //console.log(columns[columnIndex]);
 // 根据列名判断进行合并
   if (columns[columnIndex] === "type") {
     return compareSingleAttrReturnColSpan(row, "type", rowIndex, data);
   } else if (columns[columnIndex] === "target") {
     return compareSingleAttrReturnColSpan(row, "target", rowIndex, data);
   } else if (columns[columnIndex] === "scorePercent") {
     return compareSingleAttrReturnColSpan(row, "scorePercent", rowIndex, data);
   }else if (columns[columnIndex] === "empName") {
     return compareSingleAttrReturnColSpan(row, "empName", rowIndex, data);
   }
};
</script>
<style lang="scss" scoped>
.el-card {
  border-radius: 10px;
  margin: 20px auto;
}
:deep(.my-label) {
  background: rgba(98, 106, 239, 0.15) !important;
  color: #626aef !important;
  border: #626aef 2px solid !important ;
}
:deep(.my-content) {
  color: #fff !important;
  background: rgba(98, 106, 239, 0.9) !important;
  border: #626aef 2px solid !important ;
}
.button {
  width: 120px;
  height: 40px;
  margin: 10px 130px;
  float: right;
}
</style>
